<template>
	<div>
		<div class="leftnav">
			<el-menu
				default-active="0"
				class="el-menu-vertical-demo"
				@open="handleOpen"
				@close="handleClose"
				:collapse="isCollapse"
				unique-opened
			>
				<el-menu-item v-for="(item, index) in snavlist" @click="changeComponents(item,index)" :key="item.pk" :index="`${index}`">
					<i :class="item.icon_name"></i>
					<span slot="title">{{item.snav_name}}</span>
				</el-menu-item>
			</el-menu>
		</div>
	</div>
</template>


<script>
export default {
	data() {
		return {
			isCollapse: false
		};
	},
	methods: {
		handleOpen(key, keyPath) {
			console.log(key, keyPath);
		},
		handleClose(key, keyPath) {
			console.log(key, keyPath);
        },
        changeComponents(item,index){
            this.$parent.changeComponents(index)
        }
    },   
	props: ["snavlist"]
};
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
	min-width: 225px;
	max-width: 235px;
	min-height: 100%;
}
</style>